<template>
<div>
<el-breadcrumb separator='-'>
<el-breadcrumb-item>首页</el-breadcrumb-item>
<el-breadcrumb-item>商品管理</el-breadcrumb-item>
<el-breadcrumb-item>分类参数</el-breadcrumb-item>
</el-breadcrumb>
<el-card>
<el-alert
    title="注意:只允许为第三级分类设置相关参数!"
    type="warning"
    show-icon :closable="false">
  </el-alert>
   <el-cascader
    v-model="selectedCateKeys"
    :options="cateList"
    :props="cateprops"
    @change="handleChange"></el-cascader>

    <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="用户管理" name="many">
    <el-button type="primary" :disabled="isDisabled">添加参数</el-button>
    <el-table :data="tableData">
    <el-table-column type="index" label="#"></el-table-column>
    <el-table-column label="商品参数" prop="attr_name"></el-table-column>
    <el-table-column label="操作">
    <template slot-scope="scope">
    <el-button icon="el-icon-edit" type="primary" size="mini">修改</el-button>
    <el-button icon="el-icon-delete" type="danger" size="mini">删除</el-button>
    </template>
    </el-table-column>
    </el-table>
    </el-tab-pane>
    <el-tab-pane label="配置管理" name="only">
    <el-button type="primary":disabled="isDisabled">添加参数</el-button>
    <el-table :data="tableData">
    <el-table-column type="index" label="#"></el-table-column>
    <el-table-column label="商品参数" prop="attr_name"></el-table-column>
    <el-table-column label="操作">
    <template slot-scope="scope">
    <el-button icon="el-icon-edit" type="primary" size="mini">修改</el-button>
    <el-button icon="el-icon-delete" type="danger" size="mini">删除</el-button>
    </template>
    </el-table-column>
    </el-table>
    </el-tab-pane>
  </el-tabs>
</el-card>
</div>
</template>

<script>
export default{
    data(){
        return{
          cateList:[],
          cateprops:{
            value:'cat_id',
            label:'cat_name',
            children:'children'
          },
          selectedCateKeys:[],
          activeName:'many',
          tableData:[],
        }
    },
    methods:{
      getCate(){
        this.$http.get('categories').then(data=>{
          this.cateList = data.data.data
          console.log(data.data.data)
        })
      },
      handleChange(){
        console.log(this.selectedCateKeys[2])
        this.gettableData()
      },
      handleClick(){
        console.log(this.activeName)
        this.gettableData()
      },
      gettableData(){
        this.$http.get(`categories/${this.cateId}/attributes`,{params:{sel:this.activeName}
        }).then(data=>{
          if(data.data.meta.status!==200){
            this.$message.error('获取参数失败')
          }else{
            this.tableData = data.data.data
            console.log(this.tableData)
          }
        })
      }
    },
    computed: {
        isDisabled:function(){
         if(this.selectedCateKeys.length !== 3){
           return true
         }
           return false
         
        },
        cateId(){
          if(this.selectedCateKeys.length ===3){
            return this.selectedCateKeys[2]
          }else{
            return null
          }
          
        }
      },
    created(){
      this.getCate()
    }
}
</script>